<template>
  <div class="test-enter">
    <div class="e-title">
      欢迎参加《{{gradeName}}{{subjectName}}诊断》
    </div>
    <div class="e-content">
      <img
        class="head-cart"
        src="../assets/img/cart-head.png"
        alt=""
      >
      <div class="e-text">
        <p class="part-title">考前必读 ：</p>
        <ul class="must-read">
          <li>
            <div><span class="point"></span></div>
            <div>
              <p>请确保是本人考试，否则校方有权作废此次考试成绩；</p>
            </div>
          </li>
          <li>
            <div><span class="point"></span></div>
            <div>进入考试系统后，将开始计时，时间消耗完，系统自动提交试卷(可手动提前交卷)；</div>
          </li>
          <li>
            <div><span class="point"></span></div>
            <div>如果异常中断，请退出并及时按同样步骤进入，继续答题；</div>
          </li>
          <li>
            <div><span class="point"></span></div>
            <div>不确定答案的题目可以使用 ”标记“ 功能，方便再次检查。</div>
          </li>
          <li>
            <div><span class="point"></span></div>
            <div>答题中不可切换窗口，否则按作弊处理！</div>
          </li>
        </ul>
        <div
          class="all-tip"
          v-if="question.examPaperMirror&&question.examPaperMirror.examPaper"
        >
          <div>
            <img
              src="../assets/img/all-num.png"
              alt=""
            >
            题目数{{question.examPaperMirror.examPaper.questionAmount||0}}道
          </div>
          <div>
            <img
              src="../assets/img/rest-time.png"
              alt=""
            >
            总时长{{question.examPaperMirror.examPaper.testTime||0}}分钟
          </div>
        </div>
      </div>
    </div>
    <router-link
      tag="div"
      :to="{path:'/test',query:{onlineTestId:onlineTestId}}"
      class="start-btn"
    >
      我知道了，开始考试
    </router-link>
  </div>
</template>

<script>
import api from 'util/xhr'
export default {
  name: 'test-enter',
  components: {},
  data: function() {
    return {
      onlineTestId: this.$route.query.onlineTestId,
      gradeName: this.$route.query.gradeName,
      subjectName: this.$route.query.subjectName,
      question: ''
    }
  },
  created() {
    this.getQuestion()
  },
  methods: {
    getQuestion() {
      this.$loading()
      api
        .post('/api/m/beginTesting', {
          onlineTestId: this.onlineTestId
        })
        .then(
          data => {
            this.$hideloading()
            data.examPaperMirror =
              data.examPaperMirror && JSON.parse(data.examPaperMirror)
            data.examPaperMirror &&
              data.examPaperMirror.questions &&
              data.examPaperMirror.questions.map(item => {
                item.answerConfig =
                  item.answerConfig && JSON.parse(item.answerConfig)
                item.beMark = false
                if (item.questionType === 0) {
                  item.selfAnswer = ''
                } else {
                  let aArr = []
                  for (let i = 0; i < item.answerConfig.inputCount; i++) {
                    aArr.push({ answer: '' })
                  }
                  item.selfAnswer = JSON.parse(JSON.stringify(aArr))
                }
              })
            sessionStorage.setItem('question', JSON.stringify(data))
            this.question = data
          },
          desc => {
            this.$hideloading()
            this.$alert({ content: desc })
          }
        )
        .catch(() => {
          this.$hideloading()
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.test-enter {
  background: url('../assets/img/bg-start.png');
  background-size: cover;
  min-height: 100%;
  padding-bottom: 30px;
}
.e-title {
  display: flex;
  font-size: 52px;
  color: #fff600;
  align-items: center;
  justify-content: center;
  height: 120px;
  font-weight: bold;
}
.e-content {
  margin: 20px;
  background: #ff9000;
  position: relative;
  box-shadow: 0px 0px 20px white inset;
  border-radius: 20px;
  padding: 20px;
}
.head-cart {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 464px;
}
.e-text {
  background: white;
  font-size: 28px;
  padding: 120px 30px 25px;
  line-height: 44px;
}
.point {
  position: relative;
  top: -2px;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background: #0fb2f5;
  margin-right: 10px;
}
.part-title {
  color: #ff7800;
  font-weight: bold;
}
.must-read {
  margin-bottom: 50px;
}
.must-read li {
  display: flex;
  margin-top: 20px;
}
.all-tip {
  display: flex;
  margin-top: 80px;
  padding-left: 22px;
}
.all-tip div {
  flex: 1;
}
.all-tip div:last-child {
  text-align: right;
}
.all-tip img {
  margin-right: 10px;
  position: relative;
  top: 4px;
  width: 40px;
}
.part-title,
.tip-ul {
  padding-left: 22px;
}
.tip-ul em {
  font-size: 36px;
  color: #ff7800;
  font-style: italic;
}
.start-btn {
  color: white;
  width: 380px;
  height: 70px;
  border: 4px solid white;
  margin: 15px auto;
  background-image: linear-gradient(0deg, #0e9bf5 0%, #50c4e2 100%);
  border-radius: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: bold;
}
</style>
